TUNES Application Style Gudie

PRODUCT DESCRIPTION

Music Service and Headphone Products

This website will promote a Music Service Application which provides users a platform where they can:

Download thousands of songs
Compose their playlists for their favorites
Watch and download music videos
Stream and listen podcasts

Beside this service, TUNES brand also provides users weekly and yearly statistics about their listening habits. Moreover for users who like to enhance their listening experience customized headphones and earphones (only in brand colors ) are also sold through this website.

Styling of Product Description Section

Paragraphs

CSS selector:

.element - for the whole section

Sample Code:

<p> This website will promote a Music Service Application which provides users a platform where they can: , Beside this service, TUNES brand also provides users weekly and yearly statistics about their listening habits. Moreover for users who like to enhance their listening experience customized headphones and earphones (only in brand colors are  also sold through this website.</p>

Rendered element:

This website will promote a Music Service Application which provides users a platform where they can: , Beside this service, TUNES brand also provides users weekly and yearly statistics about their listening habits. Moreover for users who like to enhance their listening experience customized headphones and earphones (only in brand colors are also sold through this website.

Numbered Lists

CSS selector:

.element - for the whole section

Sample Code:

 
                        <ol type="1">
                        <li>Download thousands of songs</li>
                        <li>Compose their playlists for their favorites</li>
                        <li>Watch and download music videos</li>
                        <li>Stream and listen podcasts</li>
                        </ol>

Rendered element

Download thousands of songs
Compose their playlists for their favorites
Watch and download music videos
Stream and listen podcasts

In-Text Links

CSS selector:

.intext-item

Sample Code:

<a href="#product_moodboard" class="intext-item">Default Button</a>

Rendered element

brand colors

PRODUCT MOODBOARD

Clicking on the images will take you to the source page where the images were retrieved from.

Possible Logo Design

a music wave in vibrant neon colours such as violet and blue

Colour Palette

Font Choice

arial font, all the letters are in alphabet and numbers are written in arial font

Art Direction

a man listening to music with his headphones on blue background

a women listening to music on her headphones in fron ot violet background, shaking her hair

Styling of Product Moodboard Section

Linked Images

CSS selector:

.linkedImage-item

Sample Code:

 
                    <figure><a href= "https://www.behance.net/gallery/106842361/Logo-Design-for-Music-Streaming-AppWebsite"> <img src= "img/logo2.jpg" alt="a music wave in vibrant neon colours such as violet and blue " height="300" width="350" class="linkedImage-item"></a> </figure>

Rendered element

INTERACTIVE ELEMENTS

Combined Element One: Navigation Bar

Combined Element Two: Text Input

Combined Element Three: Product Listing

blue and purple background on a stage with spotlights

Customizable Earphones

$69.99

Customize your earphones. Send a pattern and it will we pronted on the earphones

Customizable Headphones

$49.99

Get your name engraved on the headphones.

Premium Membership

$14.99

Limiteless acess. Dowload Videos. Stream Podcasts.

Styling of Interactive Elements Section

Navigation Items

CSS selector:

.nav-item

Sample Code:

 
                    <nav class="grid two-column four-column add-gutters element"><a href="#service" class="nav-item">Service </a></nav>

Rendered element

Text Input

CSS selector:

.user_info

Sample Code:

 
                    <fieldset><legend>Contact Us </legend>
                    <label for="user_info" class="user_info"> 
                          First and Last Name: 
                           <input id="user_info" type="text" placeholder="Name Surname" >
                          </label>
                        <label for="email_adress" class="user_info">  
                          E-mail Adress: 
                          <input id="email_adress" type="text" placeholder="exp@hotmail.com" >
                          </label>
            
                          </fieldset>

Rendered element

Product Listing

CSS selector:

.container

Sample Code:

 
                    <div class="grid single-column three-column add-gutters">
                    <div class="container">
                    <mg src="img/Product2.png" alt= "blue and purple background on a stage with spotlights" height="500" width="333" class="fixed" >
                    <h4>Customizable Earphones  </h4>
                    <p class="price">$39.99  </p> 
                    <p>Get your name engraved on the headphones.  </p>
                    <p>  <button>Buy Now  </button>  </p>
                    </div>
                    </div>

Rendered element

Customizable Headphones

$39.99

Get your name engraved on the headphones.

CITATIONS

Howe, Shay. n.d. Building Forms. Retrieved from https://learn.shayhowe.com/html-css/building-forms/
[Illustration of music wave in violet and blue colors]. Retrived September 30,2021."https://www.behance.net/gallery/106842361/Logo-Design-for-Music-Streaming-AppWebsite".
[A violet and blue colour specturm with the rgb values of colour, a colour palette]. Retrived September 30,2021. "https://icolorpalette.com/b8b640_9e9d5c_627596_365a99_4415b0".
[arial font, all the letters are in alphabet and numbers are written in arial font]. Retrived September 30,2021. https://en.wikipedia.org/wiki/Verdana".
[a man listening to music with his headphones on blue background].Retrived September 30,2021.https://www.westend61.de/en/imageView/DGOF01981/man-with-headphones-listening-music-while-holding-smart-phone-against-colored-background.
[a women listening to music on her headphones in fron ot violet background, shaking her hair].Retrived September 30,2021. https://www.dreamstime.com/photos-images/background-music-purple.html.
[a man listening to music from his headphones and enjoying it on blue background]. Retrived September 30,https://www.westend61.de/en/imageView/RBF07259/relaxed-man-listening-to-music-with-headphones-at-a-blue-wall.
[a women listening to music on her headphones in a calm manner in front of purple background]. Retrived September 30, https://www.dreamstime.com/photos-images/background-music-purple.htmlL.
a bright blue sound wave illustrations on colourful gradient background. Retrived September 30,https://www.dreamstime.com/photos-images/blue-music-purple.html.
[pink lit up neon sign on brick wall that says music" height="500" width="333"class="linkedImage-item]. Retrived September 30,https://www.shutterstock.com/search/music+logo+neon.
[3-d violet sound wave on dark purple background]. Retrived September 30,https://www.vectorstock.com/royalty-free-vector/purple-music-background-abstract-background-blue-vector-37187182.
[blue and purple lit up neon sign on brick wall that says music art with couple of music notes]. Retrived September 30,https://www.shutterstock.com/search/music+logo+neon.
[photograph of blue headphones on purple surface]. Retrived September 30,https://www.dreamstime.com/modern-blue-wireless-headphone-purple-background-music-concept-modern-blue-wireless-headphone-purple-background-music-image196477216.
[photograph of earphones with galaxy pattern on them]. Retrived September 30,https://www.hottopic.com/product/galaxy-lightning-earbuds/14396170.html.
[illustration of VIP pass]. Retrived September 30,https://www.istockphoto.com/vector/vip-pass-line-black-icon-id-badge-premium-card-for-enter-premium-membership-button-gm1187646966-335582177.